<style type="text/css">
    .percent-list {
        margin: 5px auto;
    }
</style>
<form action="" class="form-horizontal" role="form">

    <div class="form-group">
        <label class="col-sm-2 control-label">基础分成层级
            <br/><span class="label label-info">设置基础佣金分成的层级数，不超过10级</span>
        </label>
        <div class="col-sm-3">
            <input type="number" name="base_levels" class="form-control" id="base_levels" value="" placeholder="请输入1-10之间的数字" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">基础分成比例
            <br/><span class="label label-info">设置佣金分成比例(%) 如：50:30:20</span>
        </label>
        <div class="col-sm-4" id="base_percent">
            <div class="percent-container"></div>
            <div class="input-group percent-list">
                <div class="input-group-addon">总比例必须为 100</div>
                <input type="text" class="form-control reward_percent" name="reward_percent" readonly="readonly" value="{$mallConfig.reward_percent}" />
                <div class="input-group-addon">=</div>
                <input type="text" class="form-control reward_percent_total" name="reward_percent_total" readonly="readonly" value="" />
                <div class="input-group-addon">%</div>
            </div>

        </div>
    </div>

    
    <div class="form-group">
        <label class="col-sm-2 control-label">金牌会员分成层级
            <br/><span class="label label-info">设置金牌会员佣金分成的层级数，不超过10级</span>
        </label>
        <div class="col-sm-3">
            <input type="number" name="dealer_levels" class="form-control" id="dealer_levels" value="" placeholder="请输入1-10之间的数字" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">金牌会员分成比例
            <br/><span class="label label-info">设置佣金分成比例(%) 如：50:30:20</span>
        </label>
        <div class="col-sm-4" id="dealer_percent">
            <div class="percent-container"></div>
            <div class="input-group percent-list">
                <div class="input-group-addon">总比例必须为 100</div>
                <input type="text" class="form-control reward_percent" name="reward_percent_dealer" readonly="readonly" value="{$mallConfig.reward_percent_dealer}" />
                <div class="input-group-addon">=</div>
                <input type="text" class="form-control reward_percent_total" name="reward_percent_total" readonly="readonly" value="" />
                <div class="input-group-addon">%</div>
            </div>

        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">成为特销商最低销费</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="dealer_min_sells" value="{$mallConfig.dealer_min_sells}" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">微佣金最低提现额度</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="min_withdraw" value="{$mallConfig.min_withdraw}" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-8">
            <input type="hidden" name="id" value="{$mallConfig.id}" /> <a class="btn btn-default" onclick="javascript:history.go(-1)">返回上页</a>
            <a class="btn btn-default" onclick="self.location=document.referrer">返回上页并刷新</a>
            <button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/saveConfig">保存更改</button>
        </div>
    </div>
</form>

<script type="text/javascript">
        $(function() {
            var defaultPercent = [
                [100],
                [70, 30],
                [60, 30, 10],
                [50, 25, 15, 10],
                [45, 25, 15, 10, 5]
            ];

            var setPercent = function(levelsId, settingId) {
                var oRewardLevels = $(levelsId);
                var oSetting = $(settingId);
                var oRewardPercent = oSetting.find(".reward_percent");
                var oRewardPercentTotal = oSetting.find(".reward_percent_total");
                var oPercentListContainer = oSetting.find(".percent-container");

                var baseLevelArray = oRewardPercent.val().split(":");
                var baseLevelCount = baseLevelArray.length;

                // 监控变化
                oRewardLevels.change(function() {
                    baseLevelCount = parseInt(oRewardLevels.val());
                    if (baseLevelCount < 1 || baseLevelCount > 10) {
                        $(this).focus().val("");
                        oPercentListContainer.empty();
                    }
                    baseLevelArray = defaultPercent[baseLevelCount - 1] || [];
                    initPercentLists();
                    initTotalPercent();
                });

                // 生成百分比输入表单
                var initPercentLists = function() {
                    oPercentListContainer.empty();
                    for (var i = 0; i < baseLevelCount; i++) {
                        addInput(i + 1, baseLevelArray[i] || '');
                    }
                    oPercentListContainer.find('input').each(function(index) {
                        var othis = $(this);
                        othis.change(function() {
                            var val = parseInt(othis.val());
                            baseLevelArray[index] = val;
                            if (getPercentTotal() > 100 || val < 0) {
                                baseLevelArray[index] = 0;
                                othis.val("");
                                othis.focus();
                            }
                            initTotalPercent();
                        });
                    });
                };
                // 生成总体比例
                var initTotalPercent = function() {
                    oRewardPercent.val(baseLevelArray.join(":"));
                    oRewardPercentTotal.val(getPercentTotal());
                };
                // 添加一个输入框
                var addInput = function(index, value) {
                    var inputGroup = $("<div class='input-group percent-list'><div class='input-group-addon'>第 " + (index) + " 级分成百分比</div><input class=\"form-control\" type=\"number\" value='" + (value) + "' data-index='" + (index - 1) + "' placeholder=\"请输入一个1-100之间的数字\"><div class=\"input-group-addon\">%</div></div>");
                    oPercentListContainer.append(inputGroup);
                };
                // 获取百分比总数
                var getPercentTotal = function() {
                    var total = 0;
                    $.each(baseLevelArray, function(key, val) {
                        total += val * 1;
                    });
                    return total;
                };
                // 初始化
                oRewardLevels.val(baseLevelCount);
                oRewardPercentTotal.val(getPercentTotal());
                initPercentLists();
            };
            
            // 执行
            setPercent('#base_levels','#base_percent');
            setPercent("#dealer_levels","#dealer_percent");
        });
    </script>
    

<style type="text/css">
    <!-- .percent-operate {
        float: left;
        margin: 5px 0px 0px 5px;
    }
    -->
</style>
